<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
color	颜色选择控件
date、time	日期、时间选择控件
email	电子邮件输入控件
file	文件选择控件
number	数字输入控件
range	拖拽条控件
search	搜索框
url	网址输入控件
  -->
    <h1>HTML5新增表单控件</h1>
    <form>
      <p>
        颜色选择：
        <input type="color" />
      </p>
      <p>
        日期选择：
        <input type="date" />
      </p>
      <p>
        时间选择：
        <input type="time" />
      </p>
      <p>
        电子邮件（提交自动校验）：
        <input type="email" />
      </p>
      <p>
        必填项：
        <input type="text" required />
      </p>
      <p>
        数字（min最小值，max最大值）：
        <input type="number" min="2" max="10" />
      </p>
      <p>
        拖拽条：
        <input type="range" min="10" max="50" />
      </p>
      <p>
        搜索框（多一个清空按钮）：
        <input type="search" />
      </p>
      <p>
        网址：
        <input type="url" />
      </p>
      <p>
        <input type="submit" value="提交表单信息" />
      </p>
      <!-- 为输入框提供一些备选项，
       当用户输入的内容与备选项文字相同时，
       将会显示智能提示感应 -->
      <!-- 提示输入框 -->
      datalist 控件：
      <input type="text" list="language-list" />
      <datalist id="language-list">
        <option value="Java">Java</option>
        <option value="JavaScript">JavaScript</option>
        <option value="Python">Python</option>
        <option value="Go">Go</option>
        <option value="C++">C++</option>
      </datalist>
    </form>
  </body>
</html>
